<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main/_fragments :: header(~{::title},~{},~{::meta})">
    <!--  关键字  -->
    <meta type="keywords" content="ZGX博客关于我页面"/>
    <!--  描述　-->
    <meta type="description" content="ZGX博客关于我页面详情页面"/>
    <title>ZGX博客关于我页面</title>
</head>
<body>

<!--头部导航-->
<div th:replace="main/_fragments :: menu(5)"></div>

<!--中间内容   ctrl+enter先输入内容然后注释-->
<!--div +tab 快速补全代码-->
<div id="middle-content" class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui aligned centered stackable grid">
            <div class="eleven wide column">
                <div class="five wide column">
                    <div class="ui top attached segment">
                        <div class="ui small header" th:text="#{about.index.name}"></div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui list">
                            <div class="item">
                                <i class="user outline icon"></i>
                                <div class="content" th:text="${user.nickName}"></div>
                            </div>
                            <div class="item">
                                <i class="mail icon"></i>
                                <div class="content" th:text="${user.email}"></div>
                            </div>
                            <div class="item">
                                <i class="qq icon"></i>
                                <div class="content">
                                    <a th:href="#{fragment.footer.qq.name}" target="_blank"
                                       th:text="#{fragment.footer.qq.name}"></a>
                                </div>
                            </div>
                            <div class="item">
                                <i class="github icon"></i>
                                <div class="content">
                                    <a th:href="#{fragment.footer.github.url}" target="_blank"
                                       th:text="#{fragment.footer.github.name}"></a>
                                </div>
                            </div>
                            <div class="item">
                                <i class="blogger icon"></i>
                                <div class="content">
                                    <a th:href="#{fragment.footer.csdn.url}" target="_blank"
                                       th:text="#{fragment.footer.csdn.name}"></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui segment">
                        <div class="ui small header">
                            <i class="stack overflow icon"></i>[[#{about.index.runtime.descript}]]:
                        </div>
                        <p th:text="${user.descript}"></p>
                    </div>

                    <div class="ui attached center aligned segment">
                        <div class="ui small left aligned header">
                            <i class="superpowers icon"></i>[[#{about.index.runtime.website}]]:
                        </div>
                        <div class="ui mini statistic">
                            <div class="label" th:text="#{about.index.runtime.name}">
                            </div>
                            <div class="value">
                                [[${user.getRunningTime()}]][[#{about.index.runtime.day}]]
                            </div>
                        </div>
                    </div>
                    <div class="ui bottom center aligned  attached segment">
                        <button class="ui circular facebook icon button" data-position="bottom center"
                                data-content="敬请期待">
                            <i class="facebook icon"></i>
                        </button>
                        <button class="ui circular twitter icon button" data-position="bottom center"
                                data-content="敬请期待">
                            <i class="twitter icon"></i>
                        </button>
                        <button class="ui circular linkedin icon button" data-position="bottom center"
                                data-content="敬请期待">
                            <i class="linkedin icon"></i>
                        </button>
                        <button class="ui circular google plus icon button" data-position="bottom center"
                                data-content="敬请期待">
                            <i class="google plus icon"></i>
                        </button>
                    </div>

                    <div class="ui tall center aligned stacked segment">
                        <div class="ui left aligned small header">
                            <i class="chess knight icon"></i>[[#{about.index.runtime.leisure.moment}]]:
                        </div>
                        <object type="application/x-shockwave-flash" style="outline:none;"
                                data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" width="210" height="225">
                            <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?"></param>
                            <param name="AllowScriptAccess" value="always"></param>
                            <param name="wmode" value="opaque"></param>
                        </object>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>


<!--用户个人信息部分-->
<div th:replace="main/personal_fragments :: user_personal"></div>

<div th:replace="main/_fragments :: toTop"></div>
<!--尾部-->
<div th:replace="main/_fragments :: footer"></div>


<!--引入js-->
<th:block th:replace="main/_fragments :: script"></th:block>


<script>
    $('.facebook').popup();
    $('.twitter').popup();
    $('.linkedin').popup();
    $('.google').popup();


</script>
</body>
</html>